<template>
	<view>
		<view class="search">
			<input class="search-it" v-model="searchVal" type="text" @confirm="search" placeholder="请输入搜索内容">
		</view>
		<scroll-view scroll-y="true" class="content" v-if="goodsList.length">
			<view class="list" v-for="item,index in goodsList" :key="index">
				{{item.goods_name}}
			</view>
		</scroll-view>
		<history v-else :list="historyList" @delok="del" @delectAllok="delectAll" @search="itemSearch"></history>
	</view>
</template>

<script>
	import api from '../../utils/api.js'
	import history from '../../componentas/history/history.vue'
	export default {
		components: {
			history
		},
		data() {
			return {
				searchVal: '',
				goodsList: [],
				historyList: [], // 历史数据
			};
		},
		watch: {
			//  historyList:{ // 开启深度监听，只要historyList发生变化，都需要存储。
			// handler(){
			//   uni.setStorageSync('historyList',this.historyList);
			// },
			// deep: true
			//  }
			historyList() { // historyList 因为是一个很简单的一维数组，所以不开启深度监听也行。
				uni.setStorageSync('historyList', this.historyList);
			},
			// historyList:{
			// handler(){
			// },
			// // deep:false, // 开启深度监听
			// // immediate: false ,// 第一次，没有变化的时候也触发（可以理解为默认触发一次）
			// // // 如果要监听的数据是，基本数据类型 （以上两个属性都可以省略不写）
			// }

		},
		onLoad() {
			this.historyList = uni.getStorageSync('historyList') || [];
		},
		methods: {
			search() {
				api.get('goods/qsearch', {
					query: this.searchVal,
				}).then(res => {
					this.goodsList = res.message
					let i = this.historyList.findIndex(item => item == this.searchVal)
					if (i > -1) {
						this.historyList.splice(i, 1)
					}
					this.historyList.unshift(this.searchVal); //历史记录
					this.historyList.splice(5) // 限制最大五个
				}).catch(err => {
					this.goodsList = []
				})
			},
			delectAll() { // 子组件传入的全部删除的事件
				this.historyList = [];
			},
			del(i) { // 子组件传入的单个删除的事件
				this.historyList.splice(i, 1)
			},
			itemSearch(val) { // 子组件传入的单个搜索的事件
				this.searchVal = val;
				this.search();
			}

		}
	}
</script>

<style lang="less">
	.content {
		height: calc(100vh - 100rpx);
	}

	.list {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.search {
		height: 100rpx;
		background-color: #eb4450;
		display: flex;
		align-items: center;
		justify-content: center;

		.search-it {
			width: 90%;
			height: 70%;
			background-color: aliceblue;
			display: flex;
			align-items: center;
			border-radius: 15rpx;
			padding: 0 30rpx;
			color: #727272;
		}
	}
</style>
